<template>
  <div class="selectClass">
    <Header title="选课"/>
    <van-cell-group inset class="vancell-class" v-for="item in selectList" :key="item.id">
      <div @click="handleViewClass(item)">
        <!-- header-->
        <van-cell value="内容" is-link>
          <template #title>
                    <span style="display: flex; align-items: center;font-weight: bold;font-size: 3.5vw;color: black;">
                         <span v-if="item.type === 0">专业方向选课</span>
                         <span v-if="item.type === 1">专业分流选课</span>
                         &nbsp;<p>{{ item.year }}年{{ item.term === '0' ? '春' : '秋' }}</p>
                    </span>
          </template>
          <template #value>
            <span class="view-class">查看课程</span>
          </template>
        </van-cell>
        <!-- body-->
        <van-cell>
          <van-row style="color: #9a9b9d;font-size: 3.5vw;margin-bottom: 3vw">
            <van-col span="5" style="text-align: left;">
              开始时间
            </van-col>
            <van-col offset="1" style="color: #6d6d6d;;font-weight:500;">
              {{ item.startTime }}
            </van-col>
          </van-row>
          <van-row style="color: #9a9b9d;font-size: 3.5vw;margin-bottom: 3vw">
            <van-col span="5" style="text-align: left;">
              结束时间
            </van-col>
            <van-col offset="1" style="color: #6d6d6d;;font-weight:500;">
              {{ item.endTime }}
            </van-col>
          </van-row>
          <van-row style="color: #9a9b9d;font-size: 3.5vw;">
            <van-col span="5" style="">
              最多选课
            </van-col>
            <van-col span="5" offset="1" style="color: #6d6d6d">
              {{ item.maxNumber }}&nbsp;门
            </van-col>
            <!--状态-->
            <van-col style="margin-left:65vw;width:20%;text-align: center">
              <van-tag type="warning" :plain="false" v-if="item.startTime > systemTime">未开始</van-tag>
              <van-tag type="success" :plain="false" v-if="item.startTime < systemTime && item.endTime > systemTime">
                进行中
              </van-tag>
              <van-tag type="danger" :plain="false" v-if="item.endTime < systemTime">已结束</van-tag>
            </van-col>
          </van-row>
        </van-cell>
      </div>
    </van-cell-group>
  </div>
</template>

<script setup>
import {getStuSpeListUrl} from "/@/api/new_module/select_class/index";
import {onBeforeRouteUpdate, useRouter} from "vue-router";
import {useSystemTime} from "/@/utils/SystemTime/index";

const {systemTime} = useSystemTime() //获取当前系统时间
const router = useRouter();
const selectList = ref([])
const getCheckStuSpe = () => {
  getStuSpeListUrl().then((res) => {
    // console.log("dd", res)
    selectList.value = res.data.rows
  })
}
const handleViewClass = (item) => {
  let id = item.id
  router.push({path: '/viewClass', query: {id: id}})
}
onMounted(() => {
  getCheckStuSpe()
})
</script>

<style lang="scss" scoped>
.vancell-class {
  margin-top: 3%;
}

.view-class {
  font-size: 3.5vw;
  height: 100%;
  color: #9a9b9d;
  text-align: end
}
</style>
